<template>
	<view class="content">
		<!-- <pyh-nv :config="config"></pyh-nv> -->
		<image :src="baseurl+'association/headBg.jpg'" class="bg"></image>
		<view class="fixedHeader">
			<u-navbar title=" " bgColor="transparent" autoBack='true'></u-navbar>
			<view class="headBox">
				<image :src="content.head" class="avatar"></image>
				<text class="name">{{content.name}}</text>
				<text class="num">社群编号：{{content.code}}</text>
				<text class="desc">{{content.into}}</text>
				<view class="info">
					<view class="infoItem">
						<text class="infoTop">{{content.article_count}}</text>
						<text class="infoBottom">发帖</text>
					</view>
					<view class="infoItem">
						<text class="infoTop">{{content.activity_count}}</text>
						<text class="infoBottom">活动</text>
					</view>
					<view class="infoItem"
						@click="$navto.navto('/packageB/association_member/association_member',{id:id,admin:content.is_principal})">
						<text class="infoTop">{{content.community_user_count}}</text>
						<text class="infoBottom">成员></text>
					</view>
				</view>
				<!-- <view class="join" v-if="content.community_status==0" @click.stop="join()">
					申请加入
				</view>
				<view class="exit" v-else @click.stop="exit()">
					退出
				</view> -->
				<!-- <image :src="baseurl+'association/qrcode.png'" class="qrcode" @click.stop="join()"></image> -->
			</view>
			<view class="selectTop">
				<v-tabs v-model="current" :scroll="true" :tabs="tabs" fontSize="25rpx" @change="changeTab"
					color="#000000" activeColor="#000000" height="50rpx" lineHeight="5rpx" lineColor="#4E97AD"
					lineScale="0.4" bgColor="transparent" paddingItem="30rpx">
				</v-tabs>
			</view>
		</view>
		<scroll-view class="selectBox" scroll-y="true"
			:style="{marginTop: fixedHeaderHeight + 'px', height: contentHeight + 'px'}" @scrolltolower="getMore">
			<view class="listBox">
				<!-- 活动 -->
				<block v-for="(item,index) in total" :key="index">
					<!-- 有主办方的是活动 -->
					<view class="listBoxInner"
						:class="[index%2==0?'activityBg':'activityBg1', index%2!=0 ? 'darkText' : '']" v-if="current!=2"
						@click="$navto.navto('/packageB/activity_info/activity_info',{id:item.id})">
						<view class="listItem">
							<view class="activityBox">
								<view class="topBox">
									<image :src="baseurl+'association/icon1.png'" class="itemIcon"></image>
									<image :src="baseurl+'association/din.png'" v-if="item.is_top==1" class="din">
									</image>
									<text class="activityTitle">{{item.name}}</text>
								</view>
								<image :src="item.cover" class="itemCover"></image>
								<text class="activityName" style="left: 0;">主办方：{{item.sponsor}}</text>
								<text
									class="activityTime">活动时间：{{$timestampToTime(item.start_time)}}至{{$timestampToTime(item.end_time)}}</text>
								<text class="activityaddress">活动地点：{{item.address}}</text>
								<text class="activityNum" v-if="item.status==0">活动状态：未开始</text>
								<text class="activityNum" v-else-if="item.status==1">活动状态：进行中</text>
								<text class="activityNum" v-else-if="item.status==2">活动状态：已结束</text>
							</view>
						</view>
						<image :src="baseurl+'associationAdd/20.png'" class="delete"
							@click.stop="deleteActivity(item.id,index)"></image>
						<view class="baoxiao" v-if="current==1&&item.is_putaway==1&&(!item.invoice||item.is_consent==2)"
							@click.stop="$navto.navto('/packageB/reimburse/reimburse',{id:item.id})">
							我要报销
						</view>
						<text class="shenhe" v-if="item.is_putaway==0">审核状态：待审核</text>
						<text class="shenhe" v-if="item.is_putaway==1">审核状态：已通过</text>
						<text class="shenhe" v-if="item.is_putaway==2">审核状态：未通过 {{item.reason}}</text>
						<view v-if="item.invoice">
							<text class="baoxiaoText" v-if="item.is_consent==0">报销状态：待审核</text>
							<text class="baoxiaoText" v-if="item.is_consent==1">报销状态：已通过</text>
							<text class="baoxiaoText" v-if="item.is_consent==2">报销状态：未通过 {{item.consent_reason}}</text>
						</view>
						
					</view>
					<!-- 帖子 -->
					<view class="listBoxInner"
						:class="[index%2!=0?'activityBg1':'activityBg',  index%2!=0 ? 'darkText' : '']" v-else
						@click="$navto.navto('/packageB/post_info/post_info',{id:item.id})">
						<view class="listItem">
							<view class="activityBox">
								<view class="topBox">
									<image :src="baseurl+'association/icon2.png'" class="itemIcon"></image>
									<text class="activityTitle">{{item.title}}</text>
								</view>
								<image :src="item.avatar" class="activityHead"></image>
								<view class="activityNameBox">
									<text class="activityName1">{{item.nickname}}</text>
									<image :src="ite.icon_url" v-for="(ite,ind) in item.medal" :key="ind"
										class="userBadge"></image>
								</view>
								<view class="viewBox">
									<image :src="baseurl+'association/icon9.png'" class="eye"></image>
									<text class="viewNum">阅读：{{item.read_num}}</text>
									<image :src="baseurl+'association/vote.png'" class="vote"></image>
									<text class="viewNum">点赞：{{item.like}}</text>
									<image :src="baseurl+'association/msg.png'" class="msg"></image>
									<text class="viewNum">回复：{{item.comment}}</text>
								</view>
								<text class="publishTime">发布时间：{{item.create_time}}</text>
							</view>
						</view>
						<image :src="baseurl+'associationAdd/20.png'" class="delete"
							@click.stop="deletePost(item.id,index)"></image>
					</view>
				</block>
			</view>
			<view class="noBaoxiao" v-if="isActivity">
				<image :src="baseurl+'associationAdd/26.png'" class="noBaoxiaoIcon"></image>
				<text class="noBaoxiaoLabel">暂无往期活动</text>
			</view>
			<view class="noBaoxiao" v-if="isBaoxiao">
				<image :src="baseurl+'associationAdd/21.png'" class="noBaoxiaoIcon"></image>
				<text class="noBaoxiaoLabel">暂无报销活动</text>
			</view>
			<view class="noBaoxiao" v-if="isPublish">
				<image :src="baseurl+'associationAdd/22.png'" class="noBaoxiaoIcon"></image>
				<text class="noBaoxiaoLabel">您还暂未发布</text>
			</view>
		</scroll-view>
		<!-- <image :src="baseurl+'association/publish.png'" class="publish"
			@click="$navto.navto('/packageB/post/post',{id:content.id})" v-if="isArticle==1">
		</image> -->
		<view class="menuBox">
			<view class="left" @click="$navto.navto('/packageB/association_post/association_post',{id:id})">
				发表帖子
			</view>
			<view class="center" @click="$navto.navto('/packageB/activity_apply/activity_apply',{id:id})">
				活动申请
			</view>
			<view class="right" @click="$navto.navto('/packageB/activity_publish/activity_publish',{id:id})">
				活动发布
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseurl: this.$baseurl,
				content: '',
				tabs: ['往期活动', '待报销的活动', '帖子'],
				current: 0,
				content: '',
				id: '',
				article: [],
				activity: [],
				total: [],
				isPoster: false,
				page: 1,
				isArticle: 0,
				fixedHeaderHeight: 0,
				windowHeight: 0,
				contentHeight: 0,
				page: 1,
				haveMore: true,
				isBaoxiao: false,
				isPublish: false,
				isActivity: false
			}
		},
		mounted() {
			this.calcHeaderHeight();
		},
		onLoad(options) {
			const systemInfo = uni.getSystemInfoSync();
			this.windowHeight = systemInfo.windowHeight;
			this.id = options.id;
			// this.id = 52;
			// 获取社群详情
			this.getData();
			// 获取活动列表
			this.getActivity();
		},
		onReachBottom() {
			console.log("加载更多");
			this.page++;
			this.$request.get(`Community/community_article_list?id=${this.id}&page=${this.page}`).then(res => {
				this.article.push(...res.data.data);
				// 获取活动列表
				this.$request.get(`CommunityActivity/community_activity_list?id=${this.id}&page=${this.page}`)
					.then(res => {
						this.activity.push(...res.data.data);
						if (this.menuIndex == 0) {
							this.total = this.mergeArrays(this.activity, this.article);
						}
						if (this.menuIndex == 1) {
							this.total = this.article;
						}
						if (this.menuIndex == 2) {
							this.total = this.activity;
						}
					})
			})
		},
		methods: {
			deleteActivity(id, index) {
				uni.showModal({
					title: '提示',
					content: '是否删除该活动',
					success: (res) => {
						if (res.confirm) {
							this.$request.get(`CommunityActivity/del_activity?id=${id}`)
								.then(res => {
									this.$u.toast('删除成功');
									this.total.splice(index, 1);
								})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			deletePost(id, index) {
				uni.showModal({
					title: '提示',
					content: '是否删除该帖子',
					success: (res) => {
						if (res.confirm) {
							this.$request.get(`article/del_article?id=${id}`)
								.then(res => {
									this.$u.toast('删除成功');
									this.total.splice(index, 1);
								})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			getActivity() { //往期活动
				this.$request.get(`CommunityActivity/community_activity_list?id=${this.id}&page=${this.page}&status=1`).then(
				res => {
					this.total.push(...res.data.data);
					console.log(this.total.length);
					if (this.total.length == 0) {
						this.isActivity = true;
						this.isBaoxiao = false;
						this.isPublish = false;
					}
				})
			},
			getActivity1() { //待报销
				this.$request.post(`CommunityActivity/community_activity_list?id=${this.id}&page=${this.page}&verify=1`)
					.then(res => {
						this.total.push(...res.data.data);
						console.log(this.total.length);
						if (this.total.length == 0) {
							this.isBaoxiao = true;
							this.isActivity = false;
							this.isPublish = false;
						}
					})
			},
			getPost() {
				this.$request.get(`Community/community_article_list?page=${this.page}&id=${this.id}`).then(res => {
					this.total.push(...res.data.data);
					if (this.total.length == 0) {
						this.isPublish = true;
						this.isActivity = false;
						this.isBaoxiao = false;
					}
				})
			},
			// 获取更多需要修改
			getMore() {
				this.page++;
				if (this.current == 0) { //往期活动
					this.getActivity();
				}
				if (this.current == 1) { //待报销
					this.getActivity1();
				}
				if (this.current == 2) { //帖子
					this.getPost();
				}
			},
			calcHeaderHeight() {
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this);
					query.select('.fixedHeader').boundingClientRect(res => {
						if (res) {
							this.fixedHeaderHeight = res.height;
							this.contentHeight = this.windowHeight - res.height - 60;
						}
					}).exec();
				});
			},
			changeTab(index) {
				this.isActivity = false;
				this.isBaoxiao = false;
				this.isPublish = false;
				this.page = 1;
				this.current = index;
				this.total = [];
				if (index == 0) { //请求往期活动
					this.getActivity();
				} else if (index == 1) { //请求待报销的活动
					this.getActivity1();
				} else if (index == 2) { //请求帖子
					this.getPost();
				}
			},
			getData() {
				this.$request.get(`community/communityDetail?id=${this.id}`).then(res => {
					this.content = res.data.data;
				})
			},
		}
	}
</script>

<style lang="scss">
	.baoxiaoText {
		position: absolute;
		top: 84%;
		left: 5%;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 22rpx;
		font-weight: 500;
		color: #fff;
		width: 70%;
	}
	.shenhe {
		position: absolute;
		top: 75%;
		left: 5%;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 22rpx;
		font-weight: 500;
		color: #fff;
		width: 70%;
	}

	.noBaoxiao {
		display: flex;
		flex-direction: column;
		align-items: center;

		.noBaoxiaoLabel {
			color: #919191;
			font-size: 28rpx;
			font-weight: 500;
			margin-top: 85rpx;
		}

		.noBaoxiaoIcon {
			width: 46rpx;
			height: 56rpx;
			margin-top: 210rpx;
		}
	}

	.baoxiao {
		width: 126rpx;
		height: 60rpx;
		border-radius: 30rpx;
		text-align: center;
		line-height: 60rpx;
		font-size: 22rpx;
		font-weight: 500;
		background-color: #D95945;
		color: #fff;
		margin-left: 580rpx;
		margin-top: 30rpx;
	}

	.menuBox {
		position: fixed;
		width: 680rpx;
		height: 80rpx;
		bottom: 30rpx;
		margin-left: 35rpx;
		display: flex;
		justify-content: space-between;

		.right {
			width: 220rpx;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 40rpx;
			background-color: #4E97AD;
			font-size: 28rpx;
			font-weight: 500;
			text-align: center;
			color: #fff;
		}

		.center {
			width: 220rpx;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 40rpx;
			background-color: #DB6553;
			font-size: 28rpx;
			font-weight: 500;
			text-align: center;
			color: #fff;
		}

		.left {
			width: 220rpx;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 40rpx;
			background-color: #E6E6E6;
			font-size: 28rpx;
			font-weight: 500;
			text-align: center;
		}
	}

	.delete {
		position: absolute;
		width: 34rpx;
		height: 40rpx;
		top: 50rpx;
		right: 45rpx;
	}

	.u-navbar {
		background-color: transparent !important;

		&::after {
			display: none !important;
		}

		.u-navbar__border {
			display: none !important;
		}
	}

	.u-icon__icon {
		color: #fff !important;
	}

	.u-title {
		color: #fff !important;
	}

	.publish {
		position: fixed;
		width: 100rpx;
		height: 100rpx;
		bottom: 400rpx;
		right: 50rpx;
		z-index: 1;
	}

	.pyh-nv-box {
		position: absolute !important;
	}

	.activityBg {
		background-color: #5997AE;
	}

	.activityBg1 {
		background-color: #F0FCFF;
	}

	.darkText {
		text {
			color: #000 !important;
		}

		.black {
			color: #000 !important;
		}
	}

	.postBg {
		background-color: #F1FCFF;
	}

	.publishTime {
		position: absolute;
		max-width: 440rpx;
		font-size: 24rpx;
		font-weight: 500;
		left: 0;
		top: 200rpx;
		color: #fff;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.viewBox {
		position: absolute;
		height: 20rpx;
		display: flex;
		align-items: center;
		top: 145rpx;

		.msg {
			width: 24rpx;
			height: 22rpx;
			margin-left: 45rpx;
		}

		.vote {
			width: 22rpx;
			height: 20rpx;
			margin-left: 45rpx;
		}

		.eye {
			width: 20rpx;
			height: 14rpx;
		}

		.viewNum {
			font-size: 20rpx;
			font-weight: 500;
			margin-left: 18rpx;
			color: #fff;
		}
	}

	.selectBox {
		position: relative;
		width: 100%;
		// margin-top: 800rpx;
		// height: 48vh;
		overflow-y: scroll;

		.black {
			color: #000 !important;
		}

		.listBox {
			width: 100%;
			// height: 45vh;

			// margin-left: 38rpx;
			.listBoxInner {
				position: relative;
				width: 100%;
				padding-top: 50rpx;
				padding-bottom: 30rpx;
				height: 400rpx;
			}

			.listItem {
				width: 676rpx;
				height: 220rpx;
				position: relative;
				// margin-bottom: 50rpx;
				margin-left: 38rpx;

				.activityNameBox {
					position: absolute;
					max-width: 340rpx;
					font-size: 24rpx;
					font-weight: 500;
					top: 70rpx;
					left: 55rpx;
					color: #fff;
					display: flex;

					.activityName1 {
						max-width: 300rpx;
						font-size: 24rpx;
						font-weight: 500;
						color: #fff;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}

				.userBadge {
					width: 32rpx;
					height: 26rpx;
					margin-left: 20rpx;
					margin-top: 5rpx;
				}

				.line {
					position: absolute;
					bottom: 0;
					width: 100%;
					border-bottom: 1rpx solid #cbcbcb;
				}

				.activityBox {
					position: relative;
					width: 676rpx;

					.activityNum {
						position: absolute;
						max-width: 440rpx;
						font-size: 20rpx;
						font-weight: 500;
						left: 0;
						top: 200rpx;
						color: #fff;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					.activityaddress {
						position: absolute;
						max-width: 440rpx;
						font-size: 20rpx;
						font-weight: 500;
						left: 0;
						top: 163rpx;
						color: #fff;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					.activityTime {
						position: absolute;
						max-width: 440rpx;
						font-size: 20rpx;
						font-weight: 500;
						left: 0;
						top: 123rpx;
						color: #fff;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					.activityName {
						position: absolute;
						max-width: 380rpx;
						font-size: 24rpx;
						font-weight: 500;
						top: 72rpx;
						left: 55rpx;
						color: #fff;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					.itemCover {
						position: absolute;
						width: 236rpx;
						height: 165rpx;
						top: 66rpx;
						right: 0;
						border-radius: 15rpx;
					}

					.activityHead {
						position: absolute;
						width: 37rpx;
						height: 37rpx;
						top: 69rpx;
						border-radius: 50%;
					}

					.activityTitle {
						max-width: 510rpx;
						font-size: 28rpx;
						font-weight: 700;
						margin-left: 20rpx;
						color: #fff;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}



					.activityHead {
						position: absolute;
					}
				}

				.topBox {
					display: flex;
					align-items: center;
				}

				.din {
					width: 28rpx;
					height: 28rpx;
					margin-left: 20rpx;
				}

				.itemIcon {
					width: 60rpx;
					height: 30rpx;
				}
			}
		}
	}

	.selectTop {
		width: 710rpx;
		height: 24rpx;
		margin-top: 35rpx;
		margin-bottom: 50rpx;
		display: flex;
		justify-content: space-between;

		.selectTypeBox {
			width: 204rpx;
			height: 24rpx;
			display: flex;
			justify-content: space-between;

			.selectType {
				font-size: 20rpx;
				font-weight: 400;
				color: #8C8C8C;
			}
		}

		.selectLabel {
			width: 135rpx;
			height: 22rpx;
		}
	}

	.headBox {
		position: relative;
		width: 750rpx;
		height: 400rpx;
		// background: url('https://miantou.guguan.net/img/association/headBg.jpg');
		// background-size: 100% 100%;

		.qrcode {
			position: absolute;
			top: 50rpx;
			left: 680rpx;
			width: 34rpx;
			height: 34rpx;
		}

		.exit {
			position: absolute;
			width: 126rpx;
			height: 60rpx;
			border-radius: 30rpx;
			text-align: center;
			line-height: 60rpx;
			font-size: 22rpx;
			font-weight: 500;
			background-color: #D95945;
			color: #fff;
			left: 588rpx;
			top: 250rpx;
		}

		.join {
			position: absolute;
			width: 126rpx;
			height: 60rpx;
			border-radius: 30rpx;
			text-align: center;
			line-height: 60rpx;
			font-size: 22rpx;
			font-weight: 500;
			background-color: #4E97AD;
			color: #fff;
			left: 588rpx;
			top: 275rpx;
		}

		.info {
			position: absolute;
			font-size: 24rpx;
			font-weight: 500;
			top: 275rpx;
			left: 0rpx;
			color: #fff;
			display: flex;

			.infoItem {
				width: 120rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				.infoTop {
					font-size: 36rpx;
					font-weight: 700;
					color: #fff;
				}

				.infoBottom {
					font-size: 20rpx;
					font-weight: 500;
					color: #fff;
				}
			}
		}

		.desc {
			position: absolute;
			font-size: 24rpx;
			font-weight: 500;
			top: 160rpx;
			left: 40rpx;
			color: #fff;
			width: 700rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: normal;
		}

		.num {
			position: absolute;
			top: 110rpx;
			left: 200rpx;
			color: #A7CDD9;
			font-size: 22rpx;
			font-weight: 500;
			letter-spacing: 2rpx;
		}

		.name {
			position: absolute;
			font-size: 32rpx;
			font-weight: 700;
			top: 50rpx;
			left: 200rpx;
			color: #fff;
		}

		.avatar {
			position: absolute;
			width: 116rpx;
			height: 116rpx;
			border-radius: 50%;
			top: 20rpx;
			left: 40rpx;
		}
	}

	.fixedHeader {
		position: fixed;
	}

	.bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 577rpx;
	}

	.content {
		width: 100%;
		height: 100%;
		background-color: #fff;
		overflow: hidden;
	}

	page {
		width: 100%;
		height: 100%;
		background-color: #fff;
	}
</style>